<template>
	<view class="shop-details-container">
		<!-- 头部导航区域 -->
		<view class="header-section">
			<view style="background-color: var(--tn-color-primary);">
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>
				<tn-navbar 
					height="72rpx" 
					home-icon="" 
					bg-color="tn-type-primary_bg"
					:bottom-shadow="false" 
					:before-back="back"
					text-color="tn-white"
				>
					购物车详情
				</tn-navbar>
			</view>
		</view>

		<!-- 客户信息汇总区域 -->
		<view class="summary-section">
			<view class="customer-info">
				<view class="customer-header">
					<tn-icon name="shop" size="32" color="var(--tn-color-primary)" />
					<text class="customer-name">{{ shopClientInfoData.businessname }}</text>
				</view>
			</view>
			<view class="amount-info">
				<view class="amount-item">
					<text class="amount-label">总单金额</text>
					<text class="amount-value total">¥{{ shopClientInfoData.taxamount }}</text>
				</view>
				<view class="amount-item">
					<text class="amount-label">选中金额</text>
					<text class="amount-value selected">¥{{ selSumAmount }}</text>
				</view>
				<view class="select-btn">
					<tn-button 
						type="warning" 
						size="sm"
						shape="round"
						@click="doAll"
					>
						全选
					</tn-button>
				</view>
			</view>
		</view>

		<!-- 商品列表区域 -->
		<view class="products-section">
			<view class="product-card" v-for="(item, index) in shopClientInfoData.details" :key="index">
				<!-- 提单选择开关 -->
				<view class="submit-switch" v-if="item.serialnum === 0">
					<view class="switch-container" :class="{ 'switch-active': item.sel == 1 }">
						<tn-switch 
							v-model="item.sel" 
							size="sm"
							:active-value="1" 
							:inactive-value="0" 
							@change="compShopping" 
							active-color="var(--tn-color-primary)"
						/>
						<text class="switch-text">{{ item.sel == 1 ? '已选择' : '提单' }}</text>
					</view>
				</view>
				
				<view class="product-image">
					<image 
						:src="item.imgurl" 
						mode="aspectFit" 
						@tap="handleImageTap(item.imgurl)"
						@error="imgerror(index)"
					/>
				</view>
				<view class="product-content">
					<view class="product-title">{{ item.goodsname }}</view>
					<view class="product-info">
						<text class="manufacturer">{{ item.manufacturer }}</text>
						<text class="spec">{{ item.specunitinfo }}</text>
					</view>
					<view class="batch-info">
						<text class="batch">{{ item.batchcodeinfo || item.batchinfo }}</text>
						<text class="date">{{ item.valdateinfo || '' }}</text>
					</view>
					<view class="stock-row">
						<text class="stock">{{ item.stock}}</text>
						<text class="total-stock">{{ item.sumstock }}</text>
					</view>
					<view class="price-row">
						<text class="sale-price">¥{{ item.taxprice }}</text>
						<text class="retail-price">小计: ¥{{ ((item.taxprice || 0) * (item.num || 0)).toFixed(2) }}</text>
					</view>
					
					<view class="action-section">
						<view class="quantity-control">
							<text 
								class="control-btn" 
								:class="{ disabled: item.serialnum != 0 }"
								@click="reduceNum(item)"
								v-show="item.serialnum === 0"
							>-</text>
							<input 
								type="number" 
								v-model="item.num" 
								class="quantity-input"
								:disabled="item.serialnum != null && item.serialnum > 0"
								@blur="modifyShopping(item, index)"
							/>
							<text 
								class="control-btn" 
								:class="{ disabled: item.serialnum != 0 }"
								@click="addNum(item)"
								v-show="item.serialnum === 0"
							>+</text>
						</view>
						
						<view class="price-inputs">
							<input 
								type="digit" 
								v-model="item.taxprice" 
								class="price-input"
								placeholder="请输入价格"
								:disabled="item.oldtaxprice != null" 
								@blur="modifyShopping(item, index)"
							/>
						</view>
						
						<view class="cart-actions">
							<view class="delete-btn" @click="delShopping(item, index)">
								<tn-icon name="delete" size="32" color="#ff6b6b" />
							</view>
						</view>
					</view>
					
					<text class="notice-text" v-if="item.isshow=='N'">{{ item.showinfo }}</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<view class="action-button add-btn">
				<tn-button 
					type="info" 
					size="xl" 
					shape="round"
					@click="doTurnAround"
					:custom-style="continueButtonStyle"
				>
					<tn-icon name="add-circle" size="32" color="#ffffff" />
					<text>继续添加</text>
				</tn-button>
			</view>
			<view class="action-button submit-btn">
				<tn-button 
					type="primary" 
					size="xl" 
					shape="round"
					@click="toNavigate"
					:custom-style="submitButtonStyle"
				>
					<tn-icon name="check-circle" size="32" color="#ffffff" />
					<text>提交订单</text>
				</tn-button>
			</view>
		</view>

		<!-- 安全区域 -->
		<view class="safe-area-bottom"></view>
	</view>
	
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import { ref,reactive,onMounted,watch  } from 'vue'
	import {onBackPress} from "@dcloudio/uni-app";
	import { EventBus } from '@/mitt/EventBus.js';
	import { postCall,postPay  } from '@/api/index.js'
	import { toastMessage } from '@/utils/toast.js'
	import { getCSSVariable } from '@/utils/platform.js';
	import Big from 'big.js';
	
	import {userAllDataStore} from '@/stores'
	const store = userAllDataStore();
	
	const procName = "PROC_APP_DO_SHOPPING";
	let shopClientInfoData = reactive({});
	let noneGoodsImageUrl = ref("");
	onMounted(()=>{
		const tempShopClientInfo = uni.getStorageSync("SHOPCLIENTINFO");
		Object.assign(shopClientInfoData,tempShopClientInfo);
		const httpUrl = uni.getStorageSync("HTTP");
		noneGoodsImageUrl.value  =  httpUrl+'/static/none.png';
		selSumAmount.value = tempShopClientInfo.taxamount;
	})
	onBackPress(()=>{
		EventBus.emit('shopClientInfo',null);
	})
	const selSumAmount = ref(0);
	
	let shoppingOldNum = 0;

	// 按钮样式配置
	const continueButtonStyle = {
		background: 'linear-gradient(135deg, #74b9ff 0%, #0984e3 100%)',
		boxShadow: '0 6rpx 16rpx rgba(116, 185, 255, 0.4)',
		fontSize: '28rpx',
		fontWeight: '600'
	};

	const submitButtonStyle = {
		background: 'linear-gradient(135deg, #00b894 0%, #00a085 100%)',
		boxShadow: '0 6rpx 16rpx rgba(0, 184, 148, 0.4)',
		fontSize: '32rpx',
		fontWeight: '700'
	};
	
	let doGetShoppingCount = () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_SHOPPING";
		params["P_ACTION"] = "QUERYALLCOUNT";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					if(res.data.DATASET.length>0){
						store.state.shopingBadge = res.data.DATASET[0].sumcount;
					}
				}
			}
			
		})
	}
	
	let back = (val) =>{
		EventBus.emit('shopClientInfo',val);
		// uni.navigateBack();
		return true;
		// uni.setStorageSync("index",2);
		// uni.navigateTo({
		// 	url: '/pages/index/index'
		// });
		// uni.setStorageSync("index",2);
		// EventBus.emit('shopClientInfo',val);
		// return false;
	}
	let addNum = (item) =>{
		shoppingOldNum = item.num;
		item.num ++;
		modifyShopping(item,0);
	}
	let doAll = () =>{
		for(let i=0;i<shopClientInfoData.details.length;i++){
			shopClientInfoData.details[i].sel = 1;
		}
		compShopping();
	}
	let reduceNum = (item) =>{
		item.num --;
		if(item.num<0){
			item.num = 0;
		}
		modifyShopping(item,0);
	}
	
	const doTurnAround = ()=>{
		uni.setStorageSync("CLIENTINFO",shopClientInfoData);
		uni.setStorageSync("index",1);
		uni.navigateTo({
			url: '/pages/index/index'
		});
	}
	
	const imgerror = (index)=>{
		if(shopClientInfoData.details.length>0){
			shopClientInfoData.details[index].imgurl = noneGoodsImageUrl.value;
		}
	}
	
	const handleImageTap = (imageUrl) => {
		uni.previewImage({
			urls: [imageUrl], // 要预览的图片链接列表
			current: 0, // 当前显示图片的链接（必须是urls中的一个），索引从0开始
		});
	}
	
	const modalRef = ref()
	const delShopping=(val,index)=>{
		
		modalRef.value?.showModal({
		  title: '温馨提示',
		  content: '是否删除此品种',
		  showCancel: true,
		  cancel: () => {
		    
		  },
		  confirm: () => {
			let params = {};
			params["P_PROC_NAME"] = procName;
			params["P_ACTION"] = "DELETE";
			params["P_ID"] = val.id;
			postCall(params).then(res=>{
				if(res){
					if(res.code===200){
						toastMessage("删除成功！");	
						shopClientInfoData.details.splice(index,1);
						doGetShopping().then(res=>{
							compShopping();
							uni.setStorageSync("SHOPCLIENTINFO",shopClientInfoData);
							doGetShoppingCount();
						});
					}
				}
				
			})
		  },
		})  
	}
	
	const doGetShopping = async ()=>{
		let tempShoppingCartData  = [];
		let convertShoppingCartData = [];
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_SHOPPING";
		params["P_ACTION"] = "QUERYONE";
		params["P_CLIENTID"] = shopClientInfoData.businessid;
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(tempShoppingCartData,res.data.DATASET);					
					const mergedData = tempShoppingCartData.reduce((acc, cur) => {
					    const { businesscode, businessid, businessname,recemanid,recemanname,addressid,address,recetelephone,staffid, ...rest } = cur;
					    if (!acc[businesscode]) {
					        acc[businesscode] = { businesscode, businessid, businessname,recemanid,recemanname,addressid,address,recetelephone,staffid, details: [rest] };
					    } else {
					        acc[businesscode].details.push(rest);
					    }
					    return acc;
					}, {});
					
					const businessStats = {};
					for (const key in mergedData) {
					    const business = mergedData[key];
					    const totalPrice = business.details.reduce((total, item) => (new Big(total).plus(new Big(item.taxamount))), 0);
						mergedData[key]["taxamount"] = totalPrice;
					}
					 for (const key in mergedData) {
						if (Object.hasOwnProperty.call(mergedData, key)) {
						  convertShoppingCartData.push(mergedData[key]);
						}
					  }
					Object.assign(shopClientInfoData,convertShoppingCartData[0]);
					console.log(convertShoppingCartData)
				}
			}
			
		})
	}
	
	const compShopping=()=>{
		let taxAmount = 0;
		let selAmount = 0;
		console.log(shopClientInfoData.details)
		// if(shopClientInfoData.details === undefined){
			
		// }else{
			for(let i = 0;i<shopClientInfoData.details.length;i++){
				taxAmount = new Big(taxAmount).plus(new Big(shopClientInfoData.details[i].taxamount));
				if(shopClientInfoData.details[i].sel =="1"){
					selAmount = new Big(selAmount).plus(new Big(shopClientInfoData.details[i].taxamount))
				}
			}
			// taxAmount = taxAmount.toFixed(2);
			
		// }
		shopClientInfoData.taxamount = taxAmount;
		selSumAmount.value = selAmount;
	}
	
	const modifyShopping=(val,index)=>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "MODIFY";
		params["P_TAXPRICE"] = val.taxprice;
		params["P_NUM"] = val.num;
		params["P_ID"] = val.id;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					toastMessage("修改成功！");
					val.taxamount = parseFloat(new Big(val.num).times(new Big(val.taxprice)));
					compShopping();
					console.log(shopClientInfoData);
					uni.setStorageSync("SHOPCLIENTINFO",shopClientInfoData);
				}else{
					val.num = shoppingOldNum;
				}
			}
			
		})
	}
	
	
	
	
	
	let toNavigate = () =>{
		shopClientInfoData.selAmount = selSumAmount.value;
		uni.setStorageSync("SHOPCLIENTINFO",shopClientInfoData);
		uni.navigateTo({
			url: '/pages/shop/settle'
		})
	}
	
	let onLinePay = () =>{
		let params = {};
		params.cusid = "56045105812LSBF";
		params.appid = "appid";
		params.version = "12";
		params.trxamt = "1";
		params.reqsn = "SDD00001";
		params.notify_url = "http://124.128.76.186:9533/ydh/tonglianCall";
		params.body = "测试";
		params.remark = "SDD000000000001";
		params.paytype = "W06";
		params.randomstr = "00000";
		params.signtype = "RSA";
		postPay(params).then(res=>{
			if(res){
				if(res.code===200){
					params.sign = res.data;
					var queryParams = [];
					for (var key in params) {
					  if (params.hasOwnProperty(key)) {
					    // var value = encodeURIComponent(params[key]);
						var value = params[key];
					    queryParams.push(key + "=" + value);
					  }
					}
					console.log(222);
					plus.share.getServices(res=>{
						console.log(res);
						let sweixin = '';
						for (var i = 0; i < res.length; i++) {
							let t = res[i];
							if (t.id == 'weixin') {
							  sweixin = t;
							}
						}
						console.log(sweixin);
						if(sweixin){
							sweixin.launchMiniProgram(
								{
									id: 'gh_e64a1a89a0ad',  // 要跳转小程序的原始ID
									path: 'pages/orderDetail/orderDetail'+"?"+queryParams.join("&"),  //  可带参数
									type: 0   // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
								},
								// 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
								res2 => {
									console.log(typeof res2, res2)
									// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
									let result = JSON.parse(res2)
									console.log(result) 
									// 拿到参数后执行你需要的逻辑    
									// ......   
								},
								  err2 => {
									console.log(err2)
								  }
								);
						}
					})
					console.log(222);
				}else{
					toastMessage(res.msg);
				}
			}
			
		})
	} 
	
</script>

<style scoped>
.shop-details-container {
	min-height: 100vh;
	background: linear-gradient(to bottom, #f8f9ff 0%, #f0f2f9 100%);
}

/* 头部样式 */
.header-section {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: var(--tn-color-primary);
	box-shadow: 0 4rpx 20rpx rgba(var(--tn-color-primary-rgb), 0.15);
}

.header-section > view {
	background-color: var(--tn-color-primary) !important;
}

/* 确保导航栏组件背景色正确 */
:deep(.tn-navbar) {
	background-color: var(--tn-color-primary) !important;
}

:deep(.tn-navbar__content) {
	background-color: var(--tn-color-primary) !important;
}

.navbar-title {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: var(--tn-color-white, #ffffff);
}

/* 汇总信息样式 */
.summary-section {
	position: fixed;
	top: calc(var(--status-bar-height) + 72rpx);
	left: 0;
	right: 0;
	z-index: 998;
	background: #ffffff;
	padding: 12rpx 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	height: 155rpx;
}

.customer-info {
	margin-bottom: 8rpx;
}

.customer-header {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.customer-name {
	font-size: 28rpx;
	font-weight: 600;
	color: var(--tn-color-black, #333);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.amount-info {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 8rpx;
	width: 100%;
}

.amount-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
}

.amount-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: -6rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 1rpx;
	height: 40rpx;
	background: rgba(var(--tn-color-gray-rgb), 0.1);
}

.amount-label {
	font-size: 24rpx;
	color: var(--tn-color-gray, #666);
	margin-bottom: 4rpx;
}

.amount-value {
	font-size: 36rpx;
	font-weight: 600;
	line-height: 1;
}

.amount-value.total {
	background: linear-gradient(135deg, var(--tn-color-primary) 0%, #5B86E5 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.amount-value.selected {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.select-btn {
	flex-shrink: 0;
	margin-left: 8rpx;
}

:deep(.select-btn .tn-button) {
	height: 52rpx !important;
	padding: 0 16rpx !important;
	background: var(--tn-color-primary) !important;
	box-shadow: 0 2rpx 6rpx rgba(var(--tn-color-primary-rgb), 0.2) !important;
	font-size: 24rpx !important;
	font-weight: 500 !important;
	color: #ffffff !important;
}

:deep(.select-btn .tn-button:active) {
	transform: scale(0.98);
	opacity: 0.9;
}

/* 响应式调整 */
@media screen and (max-width: 375px) {
	.summary-section {
		padding: 8rpx 12rpx;
	}

	.amount-info {
		gap: 8rpx;
		padding: 6rpx;
	}

	.amount-value {
		font-size: 32rpx;
	}

	.amount-label {
		font-size: 22rpx;
	}

	:deep(.select-btn .tn-button) {
		height: 48rpx !important;
		padding: 0 12rpx !important;
		font-size: 22rpx !important;
	}
}

/* 商品列表样式 */
.products-section {
	margin-top: calc(var(--status-bar-height) + 72rpx + 155rpx);
	padding: 16rpx;
	padding-bottom: 160rpx;
	background-color: #f5f6fa;
}

.product-card {
	background: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	display: flex;
	padding: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	animation: slideInUp 0.5s ease forwards;
	position: relative;
}

.submit-switch {
	position: absolute;
	top: 16rpx;
	right: 16rpx;
	z-index: 10;
}

.switch-container {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: rgba(255, 255, 255, 0.95);
	padding: 8rpx 16rpx;
	border-radius: 24rpx;
	border: 1rpx solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.switch-container:active {
	transform: scale(0.95);
	box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.08);
}

.switch-container.switch-active {
	background: rgba(var(--tn-color-primary-rgb), 0.08);
	border-color: rgba(var(--tn-color-primary-rgb), 0.2);
	box-shadow: 0 2rpx 8rpx rgba(var(--tn-color-primary-rgb), 0.12);
}

.switch-container.switch-active .switch-text {
	color: var(--tn-color-primary);
	font-weight: 600;
}

.switch-text {
	font-size: 22rpx;
	color: #666;
	font-weight: 500;
	white-space: nowrap;
	user-select: none;
	transition: all 0.3s ease;
}

.product-image {
	width: 180rpx;
	height: 180rpx;
	border-radius: 12rpx;
	overflow: hidden;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.product-image image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-content {
	flex: 1;
	min-width: 0;
}

.product-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 12rpx;
	line-height: 1.4;
}

.product-info {
	margin-bottom: 8rpx;
}

.manufacturer, .spec {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 4rpx;
}

.batch-info {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.batch, .date {
	font-size: 24rpx;
	color: #666;
}

.stock-row {
	display: flex;
	gap: 20rpx;
	margin-bottom: 12rpx;
}

.stock, .total-stock {
	font-size: 24rpx;
	color: #666;
}

.price-row {
	display: flex;
	align-items: baseline;
	gap: 16rpx;
	margin-bottom: 16rpx;
}

.sale-price {
	font-size: 32rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.retail-price {
	font-size: 24rpx;
	color: #999;
}

.action-section {
	display: flex;
	align-items: center;
	gap: 16rpx;
	background: #f8f9fa;
	padding: 12rpx;
	border-radius: 12rpx;
}

.quantity-control {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 8rpx;
	overflow: hidden;
	border: 1rpx solid #eee;
}

.control-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: var(--tn-color-primary);
	background: #fff;
}

.control-btn:active {
	background: #f5f5f5;
}

.control-btn.disabled {
	opacity: 0.5;
	color: #ccc;
}

.quantity-input {
	width: 80rpx;
	height: 60rpx;
	text-align: center;
	font-size: 28rpx;
	border-left: 1rpx solid #eee;
	border-right: 1rpx solid #eee;
}

.price-inputs {
	flex: 1;
	display: flex;
	gap: 12rpx;
}

.price-input {
	flex: 1;
	height: 60rpx;
	background: #fff;
	border-radius: 8rpx;
	border: 1rpx solid #eee;
	padding: 0 16rpx;
	font-size: 26rpx;
}

.cart-actions {
	display: flex;
	align-items: center;
	justify-content: center;
}

.delete-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 8rpx;
	border: 1rpx solid #eee;
}

.delete-btn:active {
	background: #fef2f2;
}

.notice-text {
	font-size: 24rpx;
	color: #3498db;
	margin-top: 12rpx;
	display: block;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.product-card {
		padding: 16rpx;
	}
	
	.submit-switch {
		top: 12rpx;
		right: 12rpx;
	}
	
	.switch-container {
		padding: 6rpx 12rpx;
	}
	
	.switch-text {
		font-size: 20rpx;
	}
	
	.product-image {
		width: 140rpx;
		height: 140rpx;
		margin-right: 16rpx;
	}
	
	.action-section {
		flex-direction: column;
		gap: 12rpx;
	}
	
	.bottom-actions {
		padding: 16rpx;
		gap: 12rpx;
	}
}

/* 动画效果 */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.product-card {
	animation: slideInUp 0.5s ease forwards;
}

/* 底部按钮区域 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.98);
	padding: 16rpx 24rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
	display: flex;
	align-items: center;
	gap: 20rpx;
	box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.08);
	z-index: 997;
	backdrop-filter: blur(20px);
	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
}

.action-button {
	flex: 1;
	min-width: 200rpx;
	max-width: none;
}

.action-button.add-btn {
	flex: 0.8;
}

.action-button.submit-btn {
	flex: 1.2;
}

/* 自定义按钮样式 */
:deep(.tn-button) {
	width: 100% !important;
	height: 80rpx !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8rpx !important;
	font-size: 28rpx !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	border: none !important;
	position: relative !important;
	overflow: visible !important;
	white-space: nowrap !important;
	padding: 0 32rpx !important;
	border-radius: 40rpx !important;
}

/* 继续添加按钮 */
:deep(.tn-button--info) {
	background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%) !important;
	box-shadow: 0 4rpx 12rpx rgba(54, 209, 220, 0.3) !important;
}

/* 提交订单按钮 */
:deep(.tn-button--primary) {
	background: linear-gradient(135deg, #6C5CE7 0%, #8E44AD 100%) !important;
	box-shadow: 0 4rpx 12rpx rgba(108, 92, 231, 0.3) !important;
}

/* 按钮内部布局 */
:deep(.tn-button .tn-icon) {
	font-size: 32rpx !important;
	margin-right: 6rpx !important;
	flex-shrink: 0 !important;
}

:deep(.tn-button text) {
	font-size: 28rpx !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}

/* 按钮悬停效果 */
:deep(.tn-button:active) {
	transform: translateY(2rpx) !important;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15) !important;
}

/* 安全区域调整 */
.safe-area-bottom {
	height: calc(env(safe-area-inset-bottom) + 108rpx);
	background: transparent;
}

/* H5特定样式 */
/* #ifdef H5 */
.bottom-actions {
	padding-bottom: 16rpx;
}

.safe-area-bottom {
	height: 108rpx;
}
/* #endif */

/* 响应式调整 */
@media screen and (max-width: 375px) {
	.bottom-actions {
		padding: 12rpx 16rpx;
		gap: 12rpx;
	}
	
	.action-button {
		width: 160rpx;
	}
	
	:deep(.tn-button) {
		height: 72rpx !important;
		padding: 0 16rpx !important;
	}
	
	:deep(.tn-button text) {
		font-size: 24rpx !important;
	}
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
	.shop-details-container {
		background: linear-gradient(to bottom, #1a1a2e 0%, #16213e 100%);
	}
	
	.summary-section,
	.product-card {
		background: #2a2a3e;
		border: 1rpx solid #333;
	}
	
	.product-title {
		color: #ffffff;
	}
	
	.manufacturer,
	.spec,
	.batch {
		color: #ccc;
	}
	
	.bottom-actions {
		background: rgba(28, 28, 30, 0.98);
		border-top: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	/* 暗色模式下的按钮样式 */
	:deep(.tn-button--info) {
		background: linear-gradient(135deg, #0396FF 0%, #0D47A1 100%) !important;
	}
	
	:deep(.tn-button--warning) {
		background: linear-gradient(135deg, #F6D365 0%, #FDA085 100%) !important;
	}
	
	:deep(.tn-button--primary) {
		background: linear-gradient(135deg, #5B86E5 0%, #36D1DC 100%) !important;
	}
}
</style>
